<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试</title>
	<style>
	*{margin: 0 auto;}
    header{width:80%;height: 100px;border: 1px solid red;background-color: #ABCDEF;}
    nav{height: 50px;width: 1000px;border: 1px solid red;margin-top: 40px;margin-bottom: 7px;background-color: #ff9900;}
    nav ul{margin: 4px auto;border: 1px solid red;height: 40px;width: 600px;padding: 1px auto;}
    nav ul li{display:inline-block;margin: 10px 30px;border: 1px solid red;height: 25px}
    div{height: 500px;width: 80%;border: 1px solid red;background-color: blue;border: 1px solid red;}
    section{height: 480px;width: 70%;margin-top: 10px;background-color: #ABCDEF;border: 1px solid red;float: left;}
    article{height: 430px;width: 90%;border: 1px solid red;margin-top: 25px;}
    .one{height: 50px;width: 90%;margin-top: 30px;}
    p{height: 280px;width: 90%;border: 1px solid red;margin-top: 5px;}
    .two{height:50px;width: 90%;margin-top: 5px;}
    aside{height: 480px;width: 28%;margin-left: 10px;margin-top: 10px;background-color: #ABCDEF;border: 1px solid red;float: right;}
    footer{border: 1px solid red;height: 100px;width:80%;background-color: #ABCDEF;}
    p{font-weight:bold;}
    body{color: block;}
	</style>
	<script type="text/javasscript">
	function foo(){
String foo =" FOOBAR";
foo.substring(3);
foo.concat("XYZ");
}
	</script>
</head>
<body>
	<header>
		<nav>
			<ul>
				<li>首页</li>
				<li>会员</li>
				<li>注册</li>
				<li>商城</li>
				<li>购物中心</li>
			</ul>
		</nav>
	</header>
	<div> 
	    <section>
	    	<span>这是一个section标签</span>
		    <article>
			    <header class="one"></header>
			    <p >慕课网，超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手</p>
			    <footer class="two"></footer>
		    </article>
	    </section>
	    <aside></aside>
	</div>
	<footer></footer>
</body>
</html>